import { _decorator, Component, EventTouch, Node, NodeEventType, profiler, Size, Tween, UITransform, Vec2, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('HelloWorld')
export class HelloWorld extends Component {
    uiTrans: UITransform = null;
    pageSize: Size = null;

    spotNode: Node = null;
    mapNode: Node = null;
    heroNode: Node = null;
    spotMask: gi.HoleMask = null;

    glassNode: Node = null;
    glassMaskNode: Node = null;
    glassMask: gi.HoleMask = null;

    guideNode: Node = null;
    guideMask: gi.HoleMask = null;
    guides: Node[] = null;
    guideStep: number = 0;
    guideMoving: boolean = false;

    curtainNode: Node = null;
    curtainMask: gi.HoleMask = null;
    curtainTween: Tween<gi.HoleMask> = null;

    start() {
        profiler.hideStats();
        this.uiTrans = this.node.getComponent(UITransform);
        let maxSide = Math.max(this.uiTrans.width, this.uiTrans.height) * 2;
        this.pageSize = new Size(maxSide, maxSide);

        this.spotNode = this.node.getChildByPath('聚光灯Demo');
        this.mapNode = this.spotNode.getChildByName('地图');
        this.heroNode = this.spotNode.getChildByName('主角');
        this.spotMask = this.spotNode.getChildByName('黑幕').getComponent(gi.HoleMask);
        this.spotNode.getChildByName('转场按钮').on(NodeEventType.TOUCH_START, this.setPage, this);

        this.glassNode = this.node.getChildByName('放大镜Demo');
        this.glassMaskNode = this.glassNode.getChildByName('放大镜');
        this.glassMask = this.glassMaskNode.getComponent(gi.HoleMask);
        this.glassNode.getChildByName('转场按钮').on(NodeEventType.TOUCH_START, this.setPage, this);

        this.guideNode = this.node.getChildByName('新手引导Demo');
        this.guideMask = this.guideNode.getChildByName('黑幕').getComponent(gi.HoleMask);
        this.guides = this.guideNode.getChildByName('需要引导的节点').children;
        this.guideNode.getChildByName('转场按钮').on(NodeEventType.TOUCH_START, this.setPage, this);

        this.curtainNode = this.node.getChildByName('转场幕布Demo');
        this.curtainMask = this.curtainNode.getChildByName('幕布').getComponent(gi.HoleMask);
        this.spotNode.active = true;
        this.glassNode.active = false;
        this.guideNode.active = false;
        this.curtainNode.active = false;

        this.node.on(NodeEventType.TOUCH_START, this.onTouched, this);
        this.node.on(NodeEventType.TOUCH_MOVE, this.onTouched, this);
    }

    private async onTouched(touch: EventTouch) {
        let location = touch.getUILocation();
        let pos = touch.target.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(location.x, location.y));
        if (this.spotNode.active) {
            this.heroNode.setPosition(pos);
            this.spotMask.center = new Vec2(pos.x, pos.y);
        } else if (this.glassNode.active) {
            let pos = this.uiTrans.convertToNodeSpaceAR(new Vec3(location.x, location.y));
            this.glassMask.center = new Vec2(pos.x, pos.y);
        } else if (this.guideNode.active) {
            if (this.guideMoving) return;
            this.guideMask.type = [2, 3, 4].indexOf(this.guideStep) === -1 ? gi.HoleMask.Type.矩形 : gi.HoleMask.Type.椭圆;
            this.guideMoving = true;
            await this.guideMask.moveTo(0.2, this.guides[this.guideStep++], 50);
            this.guideStep %= this.guides.length;
            this.guideMoving = false;
        }
    }

    private setPage(): void {
        if (this.curtainTween) return;
        this.curtainNode.active = true;
        if (this.spotNode.active) {
            this.curtainTween = new Tween(this.curtainMask)
                .set({ size: this.pageSize })
                .to(0.5, { size: new Size(0, 0) })
                .call(() => {
                    this.spotNode.active = false;
                    this.glassNode.active = true;
                    this.guideNode.active = false;
                }).delay(0.2)
                .to(0.5, { size: this.pageSize })
                .call(() => {
                    this.curtainNode.active = false;
                    this.curtainTween = null;
                }).start();
        } else if (this.glassNode.active) {
            this.curtainTween = new Tween(this.curtainMask)
                .set({ size: this.pageSize })
                .to(0.5, { size: new Size(0, 0) })
                .call(() => {
                    this.spotNode.active = false;
                    this.glassNode.active = false;
                    this.guideNode.active = true;
                }).delay(0.2)
                .to(0.5, { size: this.pageSize })
                .call(() => {
                    this.curtainNode.active = false;
                    this.curtainTween = null;
                }).start();
        } else {
            this.curtainTween = new Tween(this.curtainMask)
                .set({ size: this.pageSize })
                .to(0.5, { size: new Size(0, 0) })
                .call(() => {
                    this.spotNode.active = true;
                    this.glassNode.active = false;
                    this.guideNode.active = false;
                }).delay(0.2)
                .to(0.5, { size: this.pageSize })
                .call(() => {
                    this.curtainNode.active = false;
                    this.curtainTween = null;
                }).start();
        }
    }
}